@font-face {
    font-family: "pht";
    src: url("../assets/font/Alibaba-PuHuiTi-Light.ttf");
    font-weight: 100;
}

@font-face {
    font-family: "pht";
    src: url("../assets/font/Alibaba-PuHuiTi-Regular.ttf");
    font-weight: 300;
}

@font-face {
    font-family: "pht";
    src: url("../assets/font/Alibaba-PuHuiTi-Medium.ttf");
    font-weight: 500;
}

@font-face {
    font-family: "pht";
    src: url("../assets/font/Alibaba-PuHuiTi-Bold.ttf");
    font-weight: 700;
}

@font-face {
    font-family: "pht";
    src: url("../assets/font/Alibaba-PuHuiTi-Heavy.ttf");
    font-weight: 900;
}

html {
    font-size: 10px;
    line-height: 20px;
    font-family: "pht", "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    font-weight: 300;
}

* {
    margin: 0;
    padding: 0;
}

ul, li {
    list-style: none;
}

.block {
    display: block;
}

.flex {
    display: flex;
}

.relative {
    position: relative;
}

.sticky-left {
    position: sticky;
    left: 0;
}

.f1 {
    flex: 1;
}

.jc-start {
    justify-content: flex-start;
}

.jc-end {
    justify-content: flex-end;
}

.jc-center {
    justify-content: center;
}

.jc-space-between {
    justify-content: space-between;
}

.jc-space-around {
    justify-content: space-around;
}

.ai-start {
    align-items: flex-start;
}

.ai-end {
    align-items: flex-end;
}

.ai-center {
    align-items: center;
}

.fd-column {
    flex-direction: column;
}

.fd-rowReverse {
    flex-direction: row-reverse;
}

.overHidden {
    overflow: hidden;
}

//base-size 10px
$font-size: (
    xxs: 0.5,
    xs: 0.8,
    s: 1.3,
    m: 1.6,
    l: 2.4,
    xl: 3.2,
    xxl: 5
);

$direction: (
    t: top,
    r: right,
    l: left,
    b: bottom
);

@each $sizeKey, $size in $font-size {
    .fs-#{$sizeKey} {
        font-size: #{$size}rem;
    }
}

@each $dirKey, $dir in $direction {
    @each $sizeKey, $size in $font-size {
        .m#{$dirKey}-#{$sizeKey} {
            margin-#{$dir}: #{$size}rem;
        }
    }
}

@each $dirKey, $dir in $direction {
    @each $sizeKey, $size in $font-size {
        .p#{$dirKey}-#{$sizeKey} {
            padding-#{$dir}: #{$size}rem;
        }
    }
}

@each $size in (lighter, normal, bold, bolder) {
    .fw-#{$size} {
        font-weight: #{$size};
    }
}

.w100 {
    width: 100vw;
}

.h100 {
    height: 100vh;
}

$backgroundColor: #333;

.background {
    background-color: $backgroundColor;
}

.mainBackground {
    background-color: rgb(208 210 223);
}

.userBackground {
    background-color: #222;
}

.inputFocus {
    box-shadow: 0 0 3px #666;
}

$font-color: (
    white: white,
    main: #999,
);

@each $colorKey, $color in $font-color {
    .fc-#{"" + $colorKey} {
        color: #{$color};
    }
}

.hoverIcon:hover {
    color: #ff8736;
}